<template>
  <div class="main">
    <el-container class="main-content">
      <!-- 1. 头部 -->
      <el-header height="60px">
        <main-header />
      </el-header>

      <!-- 2. 主体部分 -->
      <el-main>
        <router-view></router-view>
      </el-main>
      <div class="footer">
        <main-footer />
      </div>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import MainHeader from '@/components/main-header/main-header.vue'
import MainFooter from '@/components/main-footer/main-footer.vue'
</script>

<style lang="less" scoped>
.main {
  height: 100%;

  .main-content {
    height: 100%;
    .el-header {
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 100;
      background-color: #fff;
    }
    .el-main {
      margin-top: 60px;
      overflow: initial;
      background-color: #f0f2f5;
      --el-main-padding: 0;
    }
    .footer {
      height: 100px;
      background-color: #fff;
      padding-top: 30px;
      z-index: 100;
    }
  }
}
</style>
